<template>
    <div class="l-from-body" >
        <el-form :model="formData" :rules="rules" size="mini"  ref="form" label-width="80px" >
            <el-col v-if="classifyTree == 1" :span="24" >
                <el-form-item label="上级" prop="f_ParentId">
                    <l-tree-select
                        v-model="formData.f_ParentId"
                        :options="pOptionsTree"
                        >
                    </l-tree-select>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="项目名" prop="f_ItemName">
                    <el-input v-model="formData.f_ItemName"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="项目值" prop="f_ItemValue">
                    <el-input v-model="formData.f_ItemValue"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                 <el-form-item label="排序" prop="f_SortCode">
                    <el-input-number v-model="formData.f_SortCode"  controls-position="right" :min="1" ></el-input-number>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="有效" prop="f_EnabledMark" >
                        <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="formData.f_EnabledMark"
                        >
                    </el-switch>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="备注" prop="f_Description">
                    <el-input type="textarea" v-model="formData.f_Description"></el-input>
                </el-form-item>
            </el-col>
        </el-form>
    </div>
</template>
<script>
export default {
    props:{
        classifyTree:Number,
        classifyId:String,
        pOptions:{
            type:Array,
            default:()=>[]
        }
    },
    data(){
        return {
            formData:{
                f_ParentId:'',
                f_ItemName:'',
                f_ItemValue:'',
                f_SortCode:1,
                f_EnabledMark:1,
                f_Description:''
            },
            rules: {
                f_ItemName: [
                    { required: true, message: '请输入项目名' }
                ],
                f_ItemValue: [
                    { required: true, message: '请输入项目值' },
                    { validator: this.lr_existDbFiled,tableName:'lr_base_dataitemdetail',keyName:'f_ItemDetailId',filedsJson:{f_ItemId:this.classifyId},trigger: 'null'}
                ],
                f_SortCode: [
                    { required: true, message: '请输入排序' }
                ]
                
            }
        };
    },
    computed:{
        pOptionsTree(){
            return this.$toTree(this.pOptions,"f_ItemDetailId","f_ParentId","f_ItemDetailId","f_ItemName",[this.formData.f_ItemDetailId])
        }
    },
    created () {
    },
    methods:{
        resetForm(){
            this.formData.f_ItemDetailId = ''
            this.$refs.form && this.$refs.form.resetFields()
        },
        // 校验表单
        validateForm(callback){
            this.$refs.form.validate((valid) => {
                if(valid){
                    callback()
                }
            });
        },
        setForm(data){
            this.formData = this.$deepClone(data)
            this.formData.children && delete this.formData.children
        },
        getForm(){
            return this.$deepClone(this.formData)
        }
    }
}
</script>